<template>
<p>单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。</p>
<div text="sm" m="y-4" data-v-72294632=""><p><code>checkbox-group</code>元素能把多个 checkbox 管理为一组，只需要在 Group 中使用 <code>v-model</code> 绑定 <code>Array</code> 类型的变量即可。 只有一个选项时的默认值类型为 <code>Boolean</code>，当选中时值为<code>true</code>。 <code>el-checkbox</code> 标签中的内容将成为复选框按钮之后的描述。</p>
</div>
  <div>
    <el-checkbox v-model="checked1" label="Option 1" size="large" />
    <el-checkbox v-model="checked2" label="Option 2" size="large" />
  </div>
  <div class="my-2">
    <el-checkbox v-model="checked3" label="Option 1" />
    <el-checkbox v-model="checked4" label="Option 2" />
  </div>
  <div class="mt-2">
    <el-checkbox v-model="checked5" label="Option 1" size="small" />
    <el-checkbox v-model="checked6" label="Option 2" size="small" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checked1 = ref(true)
const checked2 = ref(false)
const checked3 = ref(false)
const checked4 = ref(false)
const checked5 = ref(false)
const checked6 = ref(false)
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>